<template>
  <div>
     <div class="list-btn">
      起止日期:<DatePicker type="date" @on-change="startTime"  placeholder="选择时间" style="width: 200px"></DatePicker>
      ～<DatePicker  type="date" @on-change="endTime"  placeholder="选择时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
       类型:
       <Select v-model="params.type"  style="width:200px" clearable>
          <Option  v-for="(item,index) in excountList" :key="index" :value="index+1">{{item}}</Option>
        </Select>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.page = $event; getList(url)" @changePageSize="params.pageSize = $event; getList(url)"></page-button>
    <Modal
      v-model="show"
      :title="`${titleType}`"
      :footer-hide="true"
      :loading="loading"
       width="800px">
       <div v-if="titleType == '实时统计'">
         <div id="main" style="width: 720px;height:400px;"></div>
       </div>
       <div class="detail" v-else>
        <Table border :columns="recordTitle" :data="recordData"></Table>
        <Page style="margin-top: 10px;text-align: right;" :current="record.page" :total="recordTotal" simple  @on-change="changeRecordNum"/>
       </div>
      <div style="text-align: right;margin-top: 20px">
        <Button @click="show = false;" type="primary">关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import $ from 'jquery'
  import echarts from 'echarts'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
    },
    data(){
      return {
        url:'/merchant/statistics',
        countUrl:'',
        timeUrl:'',
        countTime:'',
        countType:'',
        titleType:'',
        show:false,
        recordTotal:0,
        tag: {
          'title': '消费统计',
          'path': '/work/expense/count'
        },
        recordData:[],
        record: {
          //status:'',
          page: 1,
          pageSize: 10
        },
        recordTitle:[
          {
            title:'时间',
            key:'create_time',
            minWidth:35,
            render:(h,params) => {
              return h('div',params.row.create_time.split(' ')[0])
            }
          },
          {
            title:'手机号',
            key:'phone',
            minWidth:30,
            render: (h,params) =>{
              return h('div',params.row.phone ? params.row.phone : '—')
            }
          },
          {
            title:'用户ID',
            key:'user_id',
            minWidth:30
          },
          {
            title:'姓名',
            key:'realname',
            minWidth:30,
             render: (h,params) =>{
              return h('div',params.row.realname ? params.row.realname : '—')
            }
          },
        ],
        excountList:['短信验证码','活体','手机三要素','银行卡','运营商','淘宝','风控'],
        params: {
          page: 1,
          pageSize: 10
        },
         listTitle: [
        {
          title: "时间",
          key: "date",
          align: "center",
          minWidth:150,
          render:(h,params) => {
              return h('div',params.row.date.split(' ')[0])
          }
        },
        {
          title: "类型",
          key: "type",
          align: "center",
          minWidth:100,
          render:(h,params) => {
            return h('div',this.getCount(params.row.type))
          }
        },
        {
          title: "数量",
          key: "num",
          align: "center",
          minWidth:120,
        },
        // {
        //   title: "单价(元)",
        //   key: "company",
        //   align: "center",
        //   minWidth:100,
        // },
        {
          title: "单价(元)",
          key: "money",
          minWidth:80,
          align: "center",
          render: (h, params) => {
            return h('div', this.toYuan(params.row.money))
          }
        },
         {
          title: "操作",
          key: "action",
          minWidth: 100,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.countType =  params.row.type;
                      this.countTime =  params.row.date.split(' ')[0];
                      this.titleType = this.getCount(params.row.type)+'详情';
                      this.getRecordMan();
                      // console.log(this.titleType,'title');
                    }
                  }
                },
                "查看详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.titleType = '实时统计';
                      this.countType =  params.row.type;
                      this.countTime =  params.row.date.split(' ')[0];
                      let data ={
                        type : this.countType,
                        time : this.countTime,
                      }
                      $.ajax({
                        type: "get",
                        url: this.timeUrl,
                        data:data,
                        success:(res) => {
                          console.log(res,'success');
                          // this.getLine(data);
                          // this.show = true;
                          let dataArr = [100,200,500,400,300];
                          this.getLine(dataArr);
                        }
                      })
                    }
                  }
                },
                "实时统计"
              )
            ]);
          }
        }
      ],
      }
    },
    created() {
      this.getUrl();
    },
    methods: {
      getRecordMan(page = '1'){
          let data ={
            type : this.countType,
            time : this.countTime,
            page : page,
            pageSize : '10'
          }
          $.ajax({
            type: "get",
            url: this.countUrl,
            data: data,
            success:(res) => {
              console.log(res,'success');
              this.recordData = res.data.result.data;
              this.recordTotal = res.data.total;
              this.show = true;
            }
          })
      },
      getUrl(){
        this.$get('/merchant/url').then(res => {
          if(res.code == 0){
            this.countUrl = res.data.url;
            this.timeUrl = res.data.url_detail
          }
          console.log(res,'jjj');
        })
      },
      getLine(data){
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
       var  option = {
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
              data:[]
          },
          grid: {
              left: '3%',
              right: '2%',
              bottom: '5%',
              containLabel: true
          },
          // toolbox: {
          //     feature: {
          //         saveAsImage: {}
          //     }
          // },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00',
              '13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']
          },
          yAxis: {
              type: 'value'
          },

          series: [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                label: {
                normal: {
                  show: true,
                  position: 'top',
                }
            },
                data:data
            },
        ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
         this.show = true;
      },
      changeRecordNum(value){
        this.record.page = value;
        this.getRecordMan(this.record.page);
      },
      submitModal(){
        // this.$refs.formRole.validate((valid) => {
        //   if(valid){
            let data = this.formRole;
            this.$post('/audit/audit',data).then(res => {
              console.log(res,'审核');
              if(res.code == 0){
                // this.$Message.success(res.msg);
                this.show = false;
                this.resetValidate('formRole');
                this.$Message.success("审核完成");
                this.getList(this.url)
              }else if(res.code == 1){
                 this.$Message.error(res.msg);
                 this.show = true;
                //  this.resetValidate('formRole');
                //  this.orderData =[];
              }else{
                this.$Message.error(res.msg);
                this.show = false;
                this.resetValidate('formRole');
              }
            })
        //   }
        // })
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

  /deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
</style>
